<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>PHP登录</title>
</head>
<body>
	
	<div>
		用户名：<input id="username" type="text" autocomplete="off"><br><br>
		密码：<input id="password" type="password" autocomplete="off"><br><br>
		验证码：<img src="http://127.0.0.1/PHPStudy/login/loginCode.php" width="150" height="35" id="codeImg" border="1">
		<input type="text" name="code" id="code" autocomplete="off">
		<br><br>
		<button id="submit">登录</button>
	</div>
	
	
	<script src="jquery-3.2.1.min.js"></script>
	<script>
		const getRequest = function(param){
			const promise = new Promise((resolve, reject) => {
				$.ajax({
					type: 'GET',
					url: param.url,
					dataType: "json",
					data: param.data || '',
					success: function(res){
						resolve(res);
					},
					error: function(error){
						reject(error);
					}
				});
			});
		};
		const postRequest = function(param){
			return new Promise((resolve, reject) => {
				$.ajax({
					type: 'POST',
					url: param.url,
					dataType: "json",
					data: param.data || '',
					success: function(data){
						resolve(data);
					},
					error: function(error){
						reject(error);
					}
				});
			});
		};
	</script>
	<script>
		$("#codeImg").click(function(){
			$(this).attr("src", "http://127.0.0.1/PHPStudy/login/loginCode.php?"+Math.random());
		});

		$("#submit").click(function(){
			let username = $("#username").val();
			let password = $("#password").val();
			let code = $("#code").val();

			let p = postRequest({
				url: 'http://127.0.0.1/PHPStudy/login/login-modul.php',
				data: {"username":username,"password":password,"code":code}
			});
			p.then(res => {
				if(res.status == "yes"){
					alert(res.msg);
				}else{
					alert(res.msg);
				}
			}).catch(error => console.log('rejected:', error));
		});
	</script>
	<script>
		/**调用示例**/
		/*let p = postRequest(中间放参数);
		p.then((res) => {
			//处理第一个异步任务的结果(每次调用then都会返回一个新创建的Promise对象)
			//此处放处理代码
			return postRequest(中间放参数); 启动第二个任务
		}).then((res) => {
			//处理第二个异步任务的结果(每次调用then都会返回一个新创建的Promise对象)
			//此处放处理代码
			return postRequest(中间放参数); 启动第三个任务
		}).then((res) => {
			//处理第三个异步任务的结果(每次调用then都会返回一个新创建的Promise对象)
		}).catch((err) => {
			console.log(err);
		})*/
	</script>
</body>
</html>